<template>
<div>
  <div class="videoComp">
    <video
      id="videoElement"
      src="http://183.230.78.168/vcloud1049.tc.qq.com/1049_M0115900002UeLzW1CXJwM1001685784.f9844.mp4?vkey=87237FBC4C4E300A3216A5986F0C5C40F590FCC93EBF9A706DB4CC56E5F7F4BAA870D04A9E5EBF391D1F376AEE6D46DDE9059E2F114E1AE2575890676E77A91B826AD56A2F3A783D46634F93AA58947701AC5E1E1B403981"
      controls
      width="100%"
      ref="video"
      webkit-playsinline
      x-webkit-airplay="allow"
      x5-playsinline
      @ended="onPlayerEnded"
    ></video>
    <div
      class="defalutImg"
      :class="hideImg"
      :style="`background-image: url('${'//qpic.y.qq.com/music_cover/hDbfqbS6Op0fIVvW9zeKhvMEnA8Fk0UlXblKVn8xdqLV0CH1rHuMRQ/300?n=1'}')`"
    >
      <img class="play" @click="playVideo" src="//qpic.y.qq.com/music_cover/3MLTH2k3HibTypyQfrdDcnGebkBvAbETgFPzCzfU2Qycr2rxa0oTepA/300?n=1" />
    </div>
  </div>
  <div class="bot">

  </div>
</div>
  
</template>

<script>
export default {
  name: "mxVideo",
  data() {
    return {
      videoLoading: false,
      // 视频实例
      videoInstance: null,
      hide: false,
      playerOptions: {
        // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "this.newVideoInfo.media_url" // url地址
          }
        ],
        hls: true,
        poster: "this.newVideoInfo.cover_url", // 你的封面地址
        width: document.documentElement.clientWidth, // 播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    };
  },
  computed: {
    hideImg() {
      return this.hide ? "hide" : "poster";
    }
  },
  props: {
    videoData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    // 播放结束
    onPlayerEnded(player) {
      // console.log('player ended!', player)
      this.hide = false;
    },
    playVideo() {
      this.hide = !this.hide;
      // this.videoInstance && this.videoInstance.play()
      this.$refs.video && this.$refs.video.play();
    }
  },
  mounted() {
    const player = this.$refs.video;
    this.videoInstance = player;
  }
};
</script>

<style lang="less" scoped>
.bot{
  height: 63vh;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; 
  padding: 5px;
  box-sizing: border-box;
  background-image: url(../../public/botp.jpg);
}
.videoComp {
  width: 100%;
  // max-height: 37vh;
  height: 37vh;
  position: relative;
  .defalutImg {
    width: 100%;
    height: 100%;
  }
  .poster {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    // background-image: url("../../assets/img/banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .play {
      width: 60px;
      height: 60px;
    }
  }
}
.hide {
  display: none;
}
#videoElement {
  display: block;
  height: 37vh;
  // max-height: 37vh;
}
</style>
